<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
</head>

<body>
    <h1>拦截器的练习</h1>

    <input type="text">
    <button id="btn">发送请求</button>


    <!-- <script>
        const int = document.querySelector('input')
        const btn = document.querySelector('#btn')

        //    创造一个axios实例
        const myAxios = axios.create({
            baseURL: '/',
            timeout: 10000,
            headers: {}
        })

        // 请求拦截器
        myAxios.interceptors.request.use((config) => {
            alert('请求拦截成功')
            const token = 'hjewkdhsabjd:dhasnx:dnxaosln'

            config.headers.token = token
            NProgress.start()
            return config
        }, () => {})

        // 响应拦截器
        myAxios.interceptors.response.use((response) => {
            alert('响应拦截成功')
            if (response.data.code !== 10000) {
                return Promise.reject(response.data.msg)
            }
            NProgress.done()
            return response
        }, (err) => {
            return Promise.reject(err)
            console.log(err);
        })


        btn.onclick = async function () {
            const userId = int.value
            try {
                const re = await myAxios.get(
                    '/getmsg', {
                        params: {
                            userId: userId
                        }
                    }
                )
                console.log(re, 're');
            } catch (e) {
                console.log(e);
            }

        }
  
    </script> -->

    <script>
        const int = document.querySelector('input')
        const btn = document.querySelector('#btn')

        // 创造一个axios实例
        const myAxios = axios.create({
            baseURL: '/',
            timeout: 10000,
            headers: {}
        })

        // 请求拦截(有两个参数 都为回调函数 一个处理成功,处理成功的回调函数有个参数，该参数为axios的配置对象（config）    一个处理失败)
        myAxios.interceptors.request.use((config) => {
            alert('请求拦截成功')
            const token ='akjshdakj:asnjkn:wqcsokmasdn'
            config.headers.token = token
            return (config) //一定要返回该配置对象 否则请求失败 
        }, () => {})

        // 响应拦截(也有两个参数为回调函数)
        myAxios.interceptors.response.use((response)=>{
            alert('响应拦截成功')
            return response;
        },(err)=>{
            return Promise.reject(err)  //如果响应失败就进入该回调函数中 返回一个失败的promise实例
        })

        btn.onclick = async function () {
            const userId = int.value
           try{
            const re = await myAxios.get(
                '/getmsg',
                {
                    params: {
                        userId: userId
                    }
                }

            )
           }catch(e){
            console.log(e.message,'e.message');
           }
        }
    </script>


</html>